<template>
  <div class="class-table">
    <div class="table-wrapper">
      <div class="tabel-container">
        <table>
          <thead>
            <tr>
              <th>时间</th>
              <th v-for="(weekNum, weekIndex) in weeks" :key="weekIndex">
                {{ '周' + digital2Chinese(weekNum, 'week') }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(courseNum, courseIndex) in coursesLen"
              :key="courseIndex"
            >
              <td>
                <p>{{ '第' + digital2Chinese(courseNum) + '节' }}</p>
                <p class="period">{{ classTableData.period[courseIndex] }}</p>
              </td>

              <td v-for="(weekNum, weekIndex) in weeks" :key="weekIndex">
                {{ fieldCharacter(weekIndex, courseIndex) }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      weeks: [], //周集合
      coursesLen: 0, //最大课节数
      classTableData: {
        //mock模拟的数据
        period: [
          '08:00-09:00',
          '09:00-10:00',
          '10:00-11:00',
          '11:00-12:00',
          '13:00-14:00',
          '14:00-15:00',
          '15:00-16:00',
          '16:00-17:00',
        ], //时间段
        weekCourse: [
          {
            week: 0,
            courses: [
              { csection: 1, title: '物理' },
              { csection: 3, title: '语文' },
            ],
          },
          {
            week: 1,
            courses: [
              { csection: 3, title: '生物' },
              { csection: 4, title: '语文' },
              { csection: 5, title: '历史' },
              { csection: 6, title: '数学' },
              { csection: 7, title: '英语' },
              { csection: 8, title: '生物' },
              { csection: 1, title: '生物' },
            ],
          },
          {
            week: 3,
            courses: [
              { csection: 5, title: '英语' },
              { csection: 6, title: '英语' },
              { csection: 7, title: '物理' },
              { csection: 8, title: '英语' },
              { csection: 1, title: '生物' },
              { csection: 2, title: '数学' },
              { csection: 3, title: '英语' },
            ],
          },
          {
            week: 4,
            courses: [
              { csection: 4, title: '语文' },
              { csection: 5, title: '英语' },
              { csection: 6, title: '生物' },
              { csection: 7, title: '历史' },
            ],
          },
          {
            week: 5,
            courses: [
              { csection: 8, title: '化学' },
              { csection: 1, title: '英语' },
            ],
          },
        ],
      },
    }
  },
  created() {
    this.updateData()
    // this.initWeekCourses()
  },
  methods: {
    /**
     * 更新mock模拟的数据，对数据进行排序
     */
    updateData() {
      /* 将数据按从周日到周六排序 */
      this.classTableData.weekCourse.sort((a, b) => {
        return a.week - b.week
      })

      /* 将数据按从第一节到第n节排序 */
      for (let v of this.classTableData.weekCourse) {
        for (let k in v) {
          if (k === 'courses') {
            v[k].sort((a, b) => {
              return a.index - b.index
            })
          }
        }
      }

      console.log(this.classTableData)
    },
    /**
     * 计算周数据及课节数
     */
    initWeekCourses() {
      const that = this
      this.weeks = [] //周集合
      this.coursesLen = 0 //最大的课节数
      // console.log(this.classTableData.weekCourse)
      this.weeks = this.classTableData.weekCourse.map((item, index) => {
        // console.log(item)
        // console.log(index)
        for (let k in item) {
          if (k === 'courses') {
            let maxCoursesLen = 0
            /* 取出一周中最大的课节数及当天的最大课节数 */
            for (let j of item[k]) {
              j.csection > that.coursesLen && (that.coursesLen = j.csection) //取所有一周里最大课节值
              j.csection > maxCoursesLen && (maxCoursesLen = j.csection) //取当天最大课节值
            }

            /* 如果当天的课节总数小于当天的最大课节值 */
            if (item[k].length < maxCoursesLen) {
              for (let i = 0; i < maxCoursesLen; i++) {
                //以最大课节值为终点遍历当天课节
                console.log(item[k][i].csection)
                if (!item[k][i] || item[k][i].csection != i + 1) {
                  //如果下标课节不存在或着与循环的下标不匹配
                  item[k].splice(i, 0, '') //填充空课节
                }
              }
            }
          }
        }
        return item.week
      })

      console.log(this.classTableData.weekCourse)
    },
    /**
     * 处理格子数据，无数据转换为字符串'-'
     * @param {Number} weekIndex 周几对应的下标
     * @param {Number} courseNum 第几节课对应的下标
     * @returns {String} 返回对应的字符
     */
    fieldCharacter(weekIndex, courseIndex) {
      if (
        this.classTableData.weekCourse[weekIndex] &&
        this.classTableData.weekCourse[weekIndex].courses[courseIndex] &&
        this.classTableData.weekCourse[weekIndex].courses[courseIndex]
          .csection ===
          courseIndex + 1
      ) {
        return this.classTableData.weekCourse[weekIndex].courses[courseIndex]
          .title
      }
      return '-'
    },

    /**
     * 数字转中文
     * @param {Number} num 需要转换的数字
     * @param {Boolean} identifier 标识符
     * @returns {String} 转换后的中文
     */
    digital2Chinese(num, identifier) {
      const character = [
        '零',
        '一',
        '二',
        '三',
        '四',
        '五',
        '六',
        '七',
        '八',
        '九',
        '十',
        '十一',
        '十二',
      ]
      return identifier === 'week' && (num === 0 || num === 7)
        ? '日'
        : character[num]
    },
  },
}
</script>

<style lang="" scoped>
table {
  table-layout: fixed;
  width: 100%;
}
thead {
  background-color: #67a1ff;
}
th {
  color: #fff;
  line-height: 17px;
  font-weight: normal;
}
tbody {
  background-color: #eaf2ff;
}
td {
  color: #677998;
  line-height: 12px;
}
th,
td {
  width: 60px;
  padding: 12px 2px;
  font-size: 12px;
  text-align: center;
}

tr td:first-child {
  color: #333;
}
.period {
  font-size: 8px;
}
</style>
